<nz-card nzTitle="基本信息">
  <nz-descriptions
    nzBordered
    nzSize="small"
    [nzColumn]="{ xxl: 4, xl: 3, lg: 3, md: 3, sm: 2, xs: 1 }"
  >
    <nz-descriptions-item nzTitle="名称">{{ basicInfoData?.name || '-' }}</nz-descriptions-item>
    <nz-descriptions-item nzTitle="优惠券ID">{{ basicInfoData?.no || '-' }}</nz-descriptions-item>
    <nz-descriptions-item nzTitle="类型">
      {{ basicInfoData.type === 1 ? '满减券' : basicInfoData.type === 2 ? '折扣券' : '随机券' }}
    </nz-descriptions-item>
    <nz-descriptions-item nzTitle="创建时间">{{ basicInfoData?.createTime || '-' }}</nz-descriptions-item>

    <nz-descriptions-item nzTitle="状态">
      <span
        *ngIf="basicInfoData?.status || basicInfoData?.status === 0"
        [ngStyle]="{'color': basicInfoData?.status | sencondCouponStatus: 'color'}"
      >
        {{ basicInfoData?.status | sencondCouponStatus: 'label' }}
      </span>
    </nz-descriptions-item>
    <nz-descriptions-item nzTitle="使用门槛">
      {{ basicInfoData?.orderLimitMoney === 0 ? '无门槛' : '满' + basicInfoData?.orderLimitMoney + '元可用' }}
    </nz-descriptions-item>
    <nz-descriptions-item nzTitle="减免额度">
      {{ basicInfoData?.type === 1 ? basicInfoData?.limitSmall + '元' : basicInfoData?.type === 2 ? basicInfoData?.limitSmall + '折 最多' + basicInfoData?.limitBig + '元': '随机' + basicInfoData?.limitSmall + ' - ' + basicInfoData?.limitBig + '元' }}
    </nz-descriptions-item>
    <nz-descriptions-item nzTitle="前端展示">
      {{ basicInfoData?.isShowWeb === 1 ? '展示' : '不展示' }}
    </nz-descriptions-item>

    <nz-descriptions-item nzTitle="领取时间">{{ basicInfoData?.getBeginTime }} ~ {{ basicInfoData?.getEndTime }}</nz-descriptions-item>
    <nz-descriptions-item nzTitle="领取人限制">
      {{ basicInfoData?.userType === 0 ? '不限制' : basicInfoData?.userType === 1 ? 'C端用户' : 'B端用户' }}
    </nz-descriptions-item>
    <nz-descriptions-item nzTitle="领取次数">
      {{ basicInfoData?.userLimitNum > 0 ? '每人限领' + basicInfoData?.userLimitNum + '次' : '不限制' }}
    </nz-descriptions-item>
    <nz-descriptions-item nzTitle="限制使用">
      <ng-container *ngIf="basicInfoData?.limitTimeNum == -1;else templateXz">
        {{ basicInfoData?.useBeginTime }} ~ {{ basicInfoData?.useEndTime }}
      </ng-container>
      <ng-template #templateXz>
        <span>{{ basicInfoData?.limitTimeNum == 0 ? '领券当天可用' : '领券当日起' + basicInfoData?.limitTimeNum + '天内可用' }}</span>
      </ng-template>
    </nz-descriptions-item>

    <nz-descriptions-item nzTitle="过期提醒">
      {{ basicInfoData?.remind === 0 ? '不提醒' : '过期前' + basicInfoData?.remind + '天提醒' }}
    </nz-descriptions-item>
    <nz-descriptions-item nzTitle="自动发放">
      {{ basicInfoData?.autoReverse === -1 ? '新人' : basicInfoData?.autoReverse == 0? '不自动发放' : '每' + basicInfoData?.autoReverse + '天首次进店自动发放' }}
    </nz-descriptions-item>
    <nz-descriptions-item nzTitle="使用说明" [nzSpan]="4">{{ basicInfoData?.useDesc || '-' }}</nz-descriptions-item>
    <nz-descriptions-item nzTitle="备注">{{ basicInfoData?.remark || '-' }}</nz-descriptions-item>
  </nz-descriptions>
</nz-card>

<nz-card nzTitle="适用商品" class="m-t-4">
  <div class="apply-goods">
    <ul class="apply-wrap-ul">
      <li>
        <span class="ul-label">指定机型</span>
        <p class="ul-control">
          <ng-container *ngIf="basicInfoData?.modelName;else templateApply">
            <div [ngSwitch]="basicInfoData?.modelName">
              <div *ngSwitchCase="0">全部</div>
              <div *ngSwitchCase="-1">-</div>
              <div *ngSwitchDefault>{{ basicInfoData?.modelName }}</div>
            </div>
          </ng-container>
          <ng-template #templateApply>-</ng-template>
        </p>
      </li>

      <li>
        <span class="ul-label">货主</span>
        <p class="ul-control" style="display: flex; align-items: center;">
          <ng-container *ngIf="basicInfoData?.supplierName;else templateApply2">
            <div [ngSwitch]="basicInfoData?.supplierName">
              <div *ngSwitchCase="0">全部</div>
              <div *ngSwitchCase="-1">-</div>
              <div *ngSwitchDefault>{{ basicInfoData?.supplierName }}</div>
            </div>
          </ng-container>
          <ng-template #templateApply2>-</ng-template>
        </p>
      </li>

      <li>
        <span class="ul-label">指定B端成色</span>
        <p class="ul-control">
          <ng-container *ngIf="basicInfoData?.containsColourB;else templateApply3">
            <div [ngSwitch]="basicInfoData?.containsColourB">
              <div *ngSwitchCase="0">全部</div>
              <div *ngSwitchCase="-1">-</div>
              <div *ngSwitchDefault>{{ this.conditionFilter(conditionOptionsB, basicInfoData?.containsColourB) }}</div>
            </div>
          </ng-container>
          <ng-template #templateApply3>-</ng-template>
        </p>
      </li>

      <li>
        <span class="ul-label">指定C端成色</span>
        <p class="ul-control">
          <ng-container *ngIf="basicInfoData?.containsColourC;else templateApply4">
            <div [ngSwitch]="basicInfoData?.containsColourC">
              <div *ngSwitchCase="0">全部</div>
              <div *ngSwitchCase="-1">-</div>
              <div *ngSwitchDefault>{{ this.conditionFilter(conditionOptionsC, basicInfoData?.containsColourC) }}</div>
            </div>
          </ng-container>
          <ng-template #templateApply4>-</ng-template>
        </p>
      </li>

      <li>
        <span class="ul-label">追加可用商品</span>
        <p class="ul-control">
          已选 {{ strToArray(basicInfoData?.containsGoods).length }} 个商品
          <button
            nz-button
            nzType="link"
            [disabled]="basicInfoData?.containsGoods === '0'"
            (click)="showPreviewModal(strToArray(basicInfoData?.containsGoods))"
          >点击查看</button>
        </p>
      </li>

      <li>
        <span class="ul-label">排除可用商品</span>
        <p class="ul-control">
          已选 {{ strToArray(basicInfoData?.filterGoods).length }} 个商品
          <button
            nz-button
            nzType="link"
            [disabled]="basicInfoData?.filterGoods === '0'"
            (click)="showPreviewModal(strToArray(basicInfoData?.filterGoods))"
          >点击查看</button>
        </p>
      </li>
    </ul>
  </div>
</nz-card>

<nz-card [nzTitle]="useInfoTmp" class="m-t-4">
  <ng-template #useInfoTmp>
    使用信息
  </ng-template>

  <ng-container *ngFor="let item of useInfos">
    <div nz-card-grid [ngStyle]="gridStyle">
      <dl class="statistics-dl">
        <dt>
          {{ item.title }}
          <i
            nz-icon
            nzType="info-circle"
            nzTheme="outline"
            nz-tooltip
            [nzTooltipTitle]="item.tips"
          ></i>
        </dt>
        <dd>
          <span>{{ item.sumNum }}</span>
          <span class="dd-tag">
            <ng-container *ngIf="item.unitName;else templateType">
              {{ item.unitName }}
            </ng-container>
            <ng-template #templateType>
              {{ item.percentage }} %
            </ng-template>
          </span>
        </dd>
      </dl>
    </div>
  </ng-container>
</nz-card>

<nz-card nzTitle="用户优惠券" class="m-t-4">
  <div class="oprea-wrap">
    <div class="oprea-lf">
      <button
        nz-button
        nzType="primary"
        class="m-r-8"
        (click)="showCouponModal()"
      >手动发放优惠券</button>
      <button
        nz-button
        nzType="primary"
        [disabled]="!userCouponTableParams?.tableData?.length || !permission.userPermission.has('secondUserCoupon:withdrawCoupon')"
        (click)="showWithdrawModal(0)"
      >撤回本页用户优惠券</button>
    </div>

    <div class="oprea-rt">
      <nz-select
        nzShowSearch
        nzAllowClear
        [nzMaxTagCount]="1"
        nzMode="multiple"
        nzPlaceHolder="全部"
        [(ngModel)]="selectedUseCoupon">
        <nz-option
          *ngFor="let option of userCouponsOptions"
          [nzLabel]="option.label"
          [nzValue]="option.value"
        ></nz-option>
      </nz-select>

      <button nz-button nzType="primary" class="m-l-8" (click)="searchUseCoupon()">查询</button>
    </div>
  </div>

  <div class="table-wrap m-t-10">
    <nz-table
      #userCounpTable
      nzSize="small"
      nzShowSizeChanger
      nzShowQuickJumper
      nzOuterBordered
      [nzScroll]="{ x: '1100px' }"
      [nzFrontPagination]="true"
      [nzLoadingDelay]="100"
      [nzLoading]="userCouponTableParams.loading"
      [nzData]="userCouponTableParams.tableData"
      [nzPageSizeOptions]="[5, 10, 20, 50, 100]"
      [nzTotal]="userCouponTableParams.total"
      [nzPageIndex]="userCouponTableParams.page"
      [nzPageSize]="userCouponTableParams.pageSize"
      [nzShowTotal]="totalTemplate"
      (nzPageIndexChange)="onPageIndexChange($event)"
      (nzPageSizeChange)="onPageSizeChange($event)"
    >
      <thead>
        <tr>
          <th nzAlign="center">ID</th>
          <th nzAlign="center">客户ID</th>
          <th nzAlign="center">领取面值</th>
          <th nzAlign="center">实际抵扣</th>
          <th nzAlign="center">关联订单号</th>
          <th nzAlign="center">领取时间</th>
          <th nzAlign="center">使用时间</th>
          <th nzAlign="center">过期时间</th>
          <th nzAlign="center">状态</th>
          <th nzAlign="center">操作</th>
        </tr>
      </thead>

      <tbody>
        <tr *ngFor="let data of userCounpTable.data; let index = index;">
          <!-- ID -->
          <td nzAlign="center">{{ data.id }}</td>
          <!-- 客户ID -->
          <td nzAlign="center">
            <a
              nz-button
              nzSize="small"
              nzType="link"
              target="_blank"
              [disabled]="!data.realUserId"
              [routerLink]="['/customer/tabs', data.realUserId, 0]">
              {{ data.realUserId || '-' }}
            </a>
          </td>
          <!-- 领取面值 -->
          <td nzAlign="center">
            <div [ngSwitch]="data?.couponInfoType">
              <!-- 满减 -->
              <div *ngSwitchCase="1">
                {{ data.couponLimitSmall }}
              </div>
              <!-- 折扣 -->
              <div *ngSwitchCase="2">
                {{ data.couponLimitSmall }}<span>折</span>
              </div>
              <!-- 随机 -->
              <div *ngSwitchCase="3">
                {{ data.discountsAmount }}
              </div>
              <div *ngSwitchDefault>-</div>
            </div>
          </td>
          <!-- 实际抵扣 -->
          <td nzAlign="center">
            <ng-container *ngIf="data.useTime;else templateNum">
              {{ data.discountsAmount ? '￥' + data.discountsAmount : '-' }}
            </ng-container>
            <ng-template #templateNum>-</ng-template>
          </td>
          <!-- 关联订单号 -->
          <td nzAlign="center">{{ data.orderNum || '-' }}</td>
          <!-- 领取时间 -->
          <td nzAlign="center">{{ (data.getTime | date: 'yyyy-MM-dd HH:mm:ss') || '-' }}</td>
          <!-- 使用时间 -->
          <td nzAlign="center">{{ (data.useTime | date: 'yyyy-MM-dd HH:mm:ss') || '-' }}</td>
          <!-- 过期时间 -->
          <td nzAlign="center">{{ (data.endTime | date: 'yyyy-MM-dd HH:mm:ss') || '-' }}</td>
          <!-- 状态 -->
          <td nzAlign="center">
            {{ this.couponStatusFilter(data.status) }}
            <i
              *ngIf="data.status === 5 && data.remark"
              nz-icon
              nz-tooltip
              nzType="exclamation-circle"
              nzTheme="outline"
              [nzTooltipTitle]="data.remark"
              nzTooltipPlacement="right"
            ></i>
          </td>
          <!-- 操作 -->
          <td nzAlign="center">
            <button
              nz-button
              nzType="link"
              [disabled]="data.status !== 1 || !permission.userPermission.has('secondUserCoupon:withdrawCoupon')"
              (click)="showWithdrawModal(1, data)"
            >撤回用户用券</button>
          </td>
        </tr>
      </tbody>
    </nz-table>

    <!-- 分页template -->
    <ng-template #totalTemplate let-total>共有 {{ total }} 条</ng-template>
  </div>
</nz-card>

<!-- S 手动发放 引自回收Components -->
<manual-release-modal
  [(ngModel)]="releaseVisible"
  [couponCode]="basicInfoData?.no"
  [modalTitle]="'手动发放优惠券'"
  (submitManual)="submitManual($event)"
></manual-release-modal>
<!-- E 手动发放 -->

<!-- S 撤回Modal -->
<nz-modal
  nzClassName="custom-model-wrap"
  [nzFooter]="null"
  [(nzVisible)]="isWithdrawVisible"
  [nzTitle]="'撤回用户用券'"
  (nzOnCancel)="isWithdrawVisible = false">

  <div *nzModalContent>
    <div class="custom-model-body">
      <nz-form-item>
        <nz-form-label [nzSpan]="4" nzRequired>撤回原因</nz-form-label>
        <nz-form-control [nzSpan]="20">
          <nz-textarea-count [nzMaxCharacterCount]="200">
            <textarea
              rows="4"
              nz-input
              maxlength="200"
              placeholder="请输入撤回原因"
              [(ngModel)]="withdrawParams.remark"
            ></textarea>
          </nz-textarea-count>
        </nz-form-control>
      </nz-form-item >
    </div>

    <div class="custom-model-foot">
      <div class="custom-foot-cont">
        <button nz-button nzType="default" (click)="isWithdrawVisible = false">取消</button>
        <button nz-button nzType="primary" (click)="subWithdraw()">确认撤回</button>
      </div>
    </div>
  </div>
</nz-modal>
<!-- S 撤回Modal -->

<!-- S 使用商品查看 Modal -->
<goods-preview-modal
  [(ngModel)]="isPreviewVisible"
  [modalTitle]="previewModalTitle"
  [previewIds]="previewIds"
  [disable]="true"
></goods-preview-modal>
<!-- E 使用商品查看 Modal -->